<!-- 
  自定义导航栏，如何做适配
    1. wx.getMenuButtonBoundingClientRect
    2. wx.getSystemInfo


    statusBarHeight = 54
    menu.height = 32

    menu.top = 58

    PS:
      1. 胶囊按钮的高度是 固定的 32px
      2. 算出胶囊按钮具体屏幕顶部的距离： wx.getMenuButtonBoundingClientRect().top 
 -->

<template>
  <status-height />
  <view class="header">
    <view class="header_btn"></view>
    <view class="header_search"></view>
  </view>
</template>

<script lang="ts" setup>
import { onLoad } from "@dcloudio/uni-app";

onLoad(() => {
  // const menuButtonRect = uni.getMenuButtonBoundingClientRect();
  // console.log("menuButtonRect", menuButtonRect);
  // const systemInfo = uni.getSystemInfoSync();
  // console.log("systemInfo", systemInfo);
  // console.log(
  //   "胶囊按钮上下的一个距离",
  //   systemInfo.statusBarHeight - menuButtonRect.top
  // );
});
</script>

<style lang="scss">
.header {
  display: flex;

  &_btn {
    width: 128rpx;
    height: 32px;
    background-color: green;
  }

  &_search {
    margin-left: 20rpx;
    flex: 1;
    height: 32px;
    background-color: #ccc;
  }
}
</style>
